<template>
  <div class="st_manager">
    <div class="st_manager_top">
      <div class="st_manager_top_tabs">
        <div v-for="(item, index) in tabsList" :key="index" :class="{
          tab_item: true,
          tab_item_active: item.type === activeTab,
          tab_item_unactive: item.type !== activeTab,
        }" @click="tabChange(item)">
          <span class="tab_item_title">{{ item.title }}</span>
          <span class="tab_item_num" v-if="item.type === activeTab">{{ item.num }}</span>
        </div>
        <a-button class="search_btn" icon="search" shape="round" size="small" @click="showSearch"> 搜索 </a-button>
      </div>
      <div class="st_manager_top_btns">
        <a-button icon="plus" type="primary" style="background: #37b2fe; border-color: #37b2fe" @click="addSuject">
          新增项目
        </a-button>
        <a-button icon="plus" type="primary" style="background: #3883fa; border-color: #3883fa; margin-left: 8px"
          @click="addSujectPortfolio">
          新增项目集
        </a-button>
      </div>
    </div>
    <div class="st_manager_search" v-if="isShowSearch">
      <a-form-model layout="inline" ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="所属部门：" prop="department">
              <a-select v-model="form.department" placeholder="请选择所属部门">
                <a-select-option v-for="(item, index) in departList" :key="index" :value="item.id">
                  {{ item.departName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目集名称：" prop="name">
              <a-input v-model="form.name" placeholder="请输入项目集名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目名称：" prop="projectName">
              <a-input v-model="form.projectName" placeholder="请输入项目名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" style="margin-top: 12px">
            <a-form-model-item>
              <a-button type="primary" style="background: #3883fa; border-color: #3883fa" @click="getList('initPage')">
                检索
              </a-button>
              <a-button style="margin-left: 10px" @click="clearSearch()"> 重置 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <DynamicTable v-if="columns.length > 0" :tableData="tableData" :columns="columns" childrenColumnName="childList"
      @titleCahnge="titleCahngeValue" @childMessage="handleChildMessage" :defaultExpandAllRows="true"
      :indexKey="indexKey" :pageSizeOptions=[] :total="total">
      <template v-slot:name="scopeVal">
        <span v-if="!scopeVal.scope.projectId">
          <a-icon type="appstore" />
          <span class="name_sty">
            <a @click="goSubjectPortfortfolio(scopeVal.scope.setId)">{{ scopeVal.scope.name }}</a>
          </span>
        </span>
        <span v-else>
          <a-icon type="apartment" />
          <span class="name_sty">
            <a @click="goSubject(scopeVal.scope.projectId)">{{ scopeVal.scope.name }}</a>
          </span>
        </span>
      </template>
      <template v-slot:status="scopeVal">
        <span v-if="scopeVal.scope.status == 0">未开始</span>
        <span v-if="scopeVal.scope.status == 1">进行中</span>
        <span v-if="scopeVal.scope.status == 2">已挂起</span>
        <span v-if="scopeVal.scope.status == 3">已关闭</span>
      </template>
      <template v-slot:finishPlan="scopeVal">
        <span v-if="scopeVal.scope.finishPlan == 1">长期</span>
        <span v-else>{{ scopeVal.scope.finishPlan }}</span>
      </template>
      <template v-slot:operation="scopeVal">
        <span>
          <span v-if="scopeVal.scope.projectId">
            <a v-if="scopeVal.scope.status == 0">
              <a-tooltip>
                <template slot="title"> 启动 </template>
                <a-icon type="login" style="color: #3883fa" @click="projetChange(scopeVal.scope, 1)" />
              </a-tooltip>
              <a-divider type="vertical" />
            </a>
            <a v-if="scopeVal.scope.status == 1">
              <a-tooltip>
                <template slot="title"> 挂起 </template>
                <a-icon type="minus-circle" style="color: #3883fa" @click="projetChange(scopeVal.scope, 2)" />
              </a-tooltip>
              <a-divider type="vertical" />
            </a>
            <a v-if="scopeVal.scope.status == 1 || scopeVal.scope.status == 2">
              <a-tooltip>
                <template slot="title"> 关闭 </template>
                <a-icon type="logout" style="color: #3883fa" @click="projetChange(scopeVal.scope, 3)" />
              </a-tooltip>
              <a-divider type="vertical" />
            </a>
            <a v-if="scopeVal.scope.status == 2">
              <a-tooltip>
                <template slot="title"> 恢复 </template>
                <a-icon type="issues-close" style="color: #3883fa" @click="projetChange(scopeVal.scope, 1)" />
              </a-tooltip>
              <a-divider type="vertical" />
            </a>
          </span>
          <a @click="handleEdit(scopeVal.scope)">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(scopeVal.scope)">
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" v-if="scopeVal.scope.projectId" />
          <a-popover v-model="scopeVal.scope.visible" trigger="click" v-if="scopeVal.scope.projectId">
            <div slot="content">
              <div class="a_sty">
                <a @click="hide(scopeVal.scope)">项目成员(项目)</a>
              </div>
              <div class="a_sty">
                <a @click="hide(scopeVal.scope)">项目权限列表</a>
              </div>
            </div>
            <a class="ant-dropdown-link" @click="more(scopeVal.scope)"> 更多 <a-icon type="down" /> </a>
          </a-popover>
        </span>
      </template>
    </DynamicTable>
  </div>
</template>

<script>
import DynamicTable from '@/components/dynamicTable'
import { getDepartmentList } from '@api/seting/department.js'
import { getProjectPageList, deleteSubjectPortfolio, deleteSubject, getSubjectStatusNum, editSubjectStatus } from '@/api/subject/stManager.js'
export default {
  name: 'STManager',
  components: { DynamicTable },
  data() {
    return {
      activeTab: null,
      isShowSearch: false,
      tabsList: [
        { title: '全部', num: 0, type: null },
        { title: '未关闭', num: 0, type: 4 },
        { title: '未开始', num: 0, type: 0 },
        { title: '进行中', num: 0, type: 1 },
        { title: '已挂起', num: 0, type: 2 },
        { title: '已关闭', num: 0, type: 3 },
      ],
      form: {
        department: undefined,
        name: '',
        projectName: '',
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      departList: [],
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          status: true,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          status: true,
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '负责人',
          dataIndex: 'principal',
          ellipsis: true,
          status: true,
        },
        {
          title: '计划开始',
          dataIndex: 'startTime',
          ellipsis: true,
          status: true,
        },
        {
          title: '计划完成',
          dataIndex: 'finishPlan',
          ellipsis: true,
          status: true,
          scopedSlots: { customRender: 'finishPlan' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 300,
          align: 'center',
          scopedSlots: { customRender: 'operation' },
          status: true,
        },
      ],
      realColums: [],
      tableData: [],
      pageNo: 1,
      total: 0,
      searchStatus: false,
      indexKey: 0,
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler(val) {
        this.tableData = val
      },
    },
    realColums: {
      deep: true,
      handler(val) {
        console.log(val, 'valval')
        this.realColums = val
      },
      immediate: true,
    },
    tabsList: {
      deep: true,
      handler(val) {
        this.tabsList = val
      },
      immediate: true,
    }
  },
  mounted() {
    this.getDepartment()
    this.getList()
    this.getStausNum()
  },
  methods: {
    // 获取状态总数
    getStausNum() {
      getSubjectStatusNum().then((res) => {
        if (res.code == 200) {
          let num = 0
          this.tabsList.map((item) => {
            res.result.map((info) => {
              if (info.name == item.title) {
                item.num = info.num
              }
            })
          })
          res.result.map((res1) => {
            num = res1.num + num
          })
          this.tabsList.map((res2) => {
            if (res2.title == '全部') {
              res2.num = num
            }
          })
          console.log(num, 'numnum')
        }
        // this.tabsList = res
      })
    },
    // 清除搜索条件
    clearSearch() {
      this.$refs['form'].resetFields()
      this.pageNo = 1
      this.getList()
    },
    // 获取所属部门
    getDepartment() {
      getDepartmentList({ userId: this.$store.getters.userInfo.id }).then((res) => {
        if (res.code == 0) {
          this.departList = res.result
        }
      })
    },
    // table页面-排序改变
    handleChildMessage(info) {
      this.pageNo = info.page
      this.getList()
      console.log(info, 'handleChildMessage')
    },
    // 获取数据
    getList(par) {
      if (par === 'initPage') {
        this.pageNo = 1
      }
      let params = {
        ...this.form,
        pageNo: this.pageNo,
        pageSize: 100,
        status: this.activeTab,
      }
      getProjectPageList(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.records
          this.total = res.result.total
          this.indexKey = this.indexKey++
        }
      })
      //   let list = [
      //     {
      //       title: '名称1',
      //       dataIndex: 'name',
      //       key: 'name',
      //       status: true,
      //     },
      //     {
      //       title: '状态',
      //       dataIndex: 'status',
      //       key: 'status',
      //       status: true,
      //     },
      //     {
      //       title: '负责人1',
      //       dataIndex: 'user',
      //       key: 'user',
      //       status: true,
      //     },
      //     {
      //       title: '计划开始',
      //       dataIndex: 'startTime',
      //       key: 'startTime',
      //       status: false,
      //     },
      //     {
      //       title: '计划完成',
      //       dataIndex: 'overTime',
      //       key: 'overTime',
      //       status: true,
      //     },
      //     {
      //       title: '操作',
      //       dataIndex: 'operate',
      //       key: 'operate',
      //       status: true,
      //     },
      //   ]
      //   setTimeout(() => {
      //     this.realColums = []
      //     let allColums = JSON.parse(JSON.stringify(this.columns))
      //     list.map((res) => {
      //       allColums.map((item) => {
      //         if (res.key == item.key) {
      //           this.$set(item, 'title', res.title)
      //           this.$set(item, 'status', res.status)
      //           this.realColums.push(item)
      //         }
      //       })
      //     })
      //   }, 2000)
    },
    // 修改
    handleEdit(row) {
      if (!row.projectId) {
        this.$router.push({ path: '/subject/editSubjectPortfolio', query: { id: row.setId } })
      } else {
        this.$router.push({ path: '/subject/editSubject', query: { id: row.projectId } })
      }
    },
    // 删除
    handleDelete(row) {
      if (!row.projectId) {
        deleteSubjectPortfolio({ id: row.setId }).then((res) => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      } else {
        deleteSubject({ id: row.projectId }).then((res) => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      }
    },
    // 打开搜索弹框
    projectSearch() {
      this.searchStatus = !this.searchStatus
    },
    // 打开关闭项目集
    projetChange(info, type) {
      const obj = {
        id: info.projectId,
        status: type
      }
      console.log(obj)
      editSubjectStatus(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success('更改成功')
          this.getList()
          this.getStausNum()
        }
      })
    },
    // 所属部门选择
    tabChange(item) {
      this.activeTab = item.type
      this.isShowSearch = false
      this.getList()
    },
    // 更多操作点击
    hide(info) {
      this.tableData.map((res) => {
        if (res.setId == info.setId) {
          res.visible = false
        }
      })
    },
    // 更多
    more(info) {
      console.log(info, 'scopeVal')
      this.tableData.map((res) => {
        if (res.id == info.id) {
          this.$set(res, 'visible', true)
        }
      })
    },
    // 列表头部更变
    titleCahngeValue(info) {
      console.log(info)
      setTimeout(() => {
        this.realColums = []
        let allColums = JSON.parse(JSON.stringify(this.columns))
        info.map((res) => {
          allColums.map((item) => {
            if (res.key == item.key) {
              this.$set(item, 'title', res.title)
              this.$set(item, 'status', res.status)
              this.realColums.push(item)
            }
          })
        })
        let obj = {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          width: 300,
          align: 'center',
          scopedSlots: { customRender: 'operation' },
          status: true,
        }
        this.realColums.push(obj)
        console.log(this.realColums, 'this.realColumsthis.realColums')
      })
    },
    showSearch() {
      this.isShowSearch = !this.isShowSearch
    },
    addSujectPortfolio() {
      // this.$router.push({ path: '/subject/editManger',query:{id:} })
      this.$router.push({ path: '/subject/addSubjectPortfolio' })
    },
    addSuject() {
      this.$router.push({ path: '/subject/addSubject' })
    },
    // 项目集跳转
    goSubjectPortfortfolio(id) {
      this.$router.push({ path: '/subject/subjectPortfolioInfo', query: { id: id } })
    },
    // 项目集跳转
    goSubject(id) {
      this.$router.push({ path: '/subject/subjectInfo', query: { id: id } })
    }
  },
}
</script>

<style lang="less" scoped>
.st_manager {
  .st_manager_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;

    .st_manager_top_tabs {
      display: flex;
      align-items: center;

      .tab_item {
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 32px;
        padding: 0 10px;

        .tab_item_title {
          color: #30394a;
          font-size: 13px;
        }

        .tab_item_num {
          color: #30394a;
          height: 16px;
          font-size: 12px;
          font-weight: 700;
          background: #ffffff;
          line-height: 16px;
          padding: 0 4px;
          margin-left: 4px;
        }
      }

      .tab_item_unactive:hover {
        background: #ebeced;
      }

      .tab_item_active {
        background: #d9eaff;

        .tab_item_title {
          font-weight: 700;
        }
      }

      .search_btn {
        color: #64758b;
        font-size: 12px;
        background: transparent;
        margin-left: 8px;
      }
    }
  }

  .st_manager_search {
    background: #ffffff;
    border: 1px solid #ebedf3;
    border-radius: 4px;
    padding: 12px 8px;
    margin-bottom: 8px;

    ::v-deep .ant-form-inline .ant-form-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    ::v-deep .ant-form-inline .ant-form-item-label {
      color: #30394a;
      font-size: 13px;
      font-weight: 700;
    }

    ::v-deep .ant-form-item-control-wrapper {
      text-align: center;
    }

    ::v-deep .ant-btn {
      padding: 0 8px;
    }
  }
}

.a_sty {
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-align: center;
}

.name_sty {
  margin-left: 5px;
}
</style>
